<template>
  <el-main>

    <span>交易流水号:</span>
    <el-input v-model="seachVO.orderNo" placeholder="请输入交易流水号"></el-input>
    <span>结算金额:</span>
    <el-input v-model="seachVO.finalAmount" placeholder="请输入结算金额"></el-input>
    <span>支付金额:</span>
    <el-input v-model="seachVO.payAmount" placeholder="请输入支付金额"></el-input>
    <br>
    <span>业务订单号:</span>
    <el-input v-model="seachVO.businessplan" placeholder="请输入业务订单号"></el-input>
    <span>交易对手:</span>
    <el-input v-model="seachVO.tradeUser" placeholder="请输入交易对手"></el-input>
    <span>发起交易日期:</span>
    <el-date-picker
      v-model="seachVO.fqStartTime"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="选择日期">
    </el-date-picker>至
    <el-date-picker
      v-model="seachVO.fqEndTime"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="选择日期">
    </el-date-picker>
    <br>
    <span>交易账户:</span>
    <el-input v-model="seachVO.tradeAccount" placeholder="请输入交易账户"></el-input>
    <span>对手账户:</span>
    <el-input v-model="seachVO.dsAccount" placeholder="请输入对手账户"></el-input>
    <span>支付截止日期:</span>
    <el-date-picker
      v-model="seachVO.zfStartTime"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="选择日期">
    </el-date-picker>至
    <el-date-picker
      v-model="seachVO.zfEndTime"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="选择日期">
    </el-date-picker>
    <br>
    <span>交易账号:</span>
    <el-input v-model="seachVO.tradeAccountNo" placeholder="请输入交易账号"></el-input>
    <span>交易渠道:</span>
    <el-input v-model="seachVO.tradeQudao" placeholder="请输入交易渠道"></el-input>
    <br>
    <span>交易账户类型:</span>
    <el-select v-model="seachVO.tradeAccountType" placeholder="请选择交易账户类型">
      <el-option
        v-for="item in tradeAccountTypes"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
    <span>渠道订单号:</span>
    <el-input v-model="seachVO.qudaoOrderNo" placeholder="请输入渠道订单号"></el-input>
    <br>
    <span>用户类型:</span>
    <el-select v-model="seachVO.userType" placeholder="请选择用户类型">
      <el-option
        v-for="item in userTypes"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
    <span>交易结果:</span>
    <el-select v-model="seachVO.tradeResult" placeholder="请选择交易结果">
      <el-option
        v-for="item in tradeResults"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
    <br>
    <span>支付方式:</span>
    <el-select v-model="seachVO.payWay" placeholder="请选择支付方式">
      <el-option
        v-for="item in payWaies"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
    <span>订单金额:</span>
    <el-input v-model="seachVO.amount" placeholder="请输入订单金额"></el-input>
    <br>
    <el-button type="primary" @click="resetForm">清空</el-button>
    <el-button type="primary" @click="list">查询</el-button>
    <el-button type="primary" @click="getExcel">导出Excel</el-button>


    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="orderNo"
        label="交易流水号"
      width="200">
      </el-table-column>
      <el-table-column
        prop="businessplan"
        label="业务订单号"
      width="200">
      </el-table-column>
      <el-table-column
        label="交易账户类型">
        <template slot-scope="scope">
          <span v-if="scope.row.tradeAccountType=='1'">微信</span>
          <span v-if="scope.row.tradeAccountType=='2'">支付宝</span>
          <span v-if="scope.row.tradeAccountType=='3'">银行卡</span>
          <span v-if="scope.row.tradeAccountType=='4'">卡拉卡</span>
        </template>
      </el-table-column>
      <el-table-column
        label="用户类型">
        <template slot-scope="scope">
          <span v-if="scope.row.userType=='1'">个人用户</span>
          <span v-if="scope.row.userType=='2'">企业商户</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="tradeAccountNo"
        label="交易账号">
      </el-table-column>
      <el-table-column
        prop="tradeAccount"
        label="交易账户">
      </el-table-column>
      <el-table-column
        label="支付方式">
       <template slot-scope="scope">
         <span v-if="scope.row.payWay=='1'">微信扫码</span>
         <span v-if="scope.row.payWay=='2'">支付宝扫码</span>
         <span v-if="scope.row.payWay=='3'">微信公众号</span>
         <span v-if="scope.row.payWay=='4'">微认证支付</span>
         <span v-if="scope.row.payWay=='5'">实时代付到银行卡</span>
         <span v-if="scope.row.payWay=='20'">批量代付到银行卡</span>
       </template>
      </el-table-column>
      <el-table-column
        prop="finalAmount"
        label="结算金额">
      </el-table-column>
      <el-table-column
        prop="tradeUser"
        label="交易对手">
      </el-table-column>
      <el-table-column
        prop="dsAccount"
        label="对手账号"
      width="200">
      </el-table-column>
      <el-table-column
        prop="tradeQudao"
        label="交易渠道">
      </el-table-column>
      <el-table-column
        prop="qudaoOrderNo"
        label="渠道订单号"
      width="250">
      </el-table-column>
      <el-table-column
        label="交易结果">
        <template slot-scope="scope">
          <span v-if="scope.row.tradeResult=='1'">处理中</span>
          <span v-if="scope.row.tradeResult=='2'">成功</span>
          <span v-if="scope.row.tradeResult=='3'">失败</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="returnCode"
        label="返回码">
      </el-table-column>
      <el-table-column
        prop="returnMsg"
        label="返回信息">
      </el-table-column>
      <el-table-column
        prop="tradeDateFq"
        label="发起交易日期"
      width="150">
      </el-table-column>
      <el-table-column
        prop="tradeDateZx"
        label="执行交易日期"
      width="150">
      </el-table-column>
      <el-table-column
        prop="tradeDateJz"
        label="支付截止日期"
      width="150">
      </el-table-column>
      <el-table-column
        prop="tradeRate"
        label="费率">
      </el-table-column>
      <el-table-column
        prop="commissionFee"
        label="手续费">
      </el-table-column>
      <el-table-column
        prop="amount"
        label="订单金额">
      </el-table-column>
      <el-table-column
        prop="payAmount"
        label="支付金额">
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page=seachVO.pageNum
      :page-sizes="[1, 3, 5, 10]"
      :page-size=seachVO.pageSize
      layout="total, sizes, prev, pager, next, jumper"
      :total=total>
    </el-pagination>

  </el-main>
</template>

<script>

import {listPayOrders,getExcel} from "@/api/finance/payorder";

export default {
  data() {
    return {
      //表格数组
      tableData: [],
      //查询对象
      seachVO:{
        pageNum:1,
        pageSize:10,
      },
      //总条数
      total:null,
      //交易账户类型
      tradeAccountTypes:[
        {id:1,name:"微信"},
        {id:2,name:"支付宝"},
        {id:3,name:"银行卡"},
        {id:4,name:"卡拉卡"}
      ],
      //用户类型
      userTypes:[
        {id:1,name:"个人用户"},
        {id:2,name:"企业商户"}
      ],
      //交易结果
      tradeResults:[
        {id:1,name:"处理中"},
        {id:2,name:"成功"},
        {id:3,name:"失败"},
      ],
      //支付方式
      payWaies:[
        {id:1,name:"微信扫码"},
        {id:2,name:"支付宝扫码"},
        {id:3,name:"微信公众号"},
        {id:4,name:"认证支付"},
        {id:5,name:"实时代付到银行卡"},
        {id:20,name:"批量代付到银行卡"},
      ]
    }
  },
  methods:{
    //导出excel
    getExcel(){
      this.download('finance/payorder/getExcel', {
        ...null
      }, `payorder_${new Date().getTime()}.xlsx`)
    },
    //重置
    resetForm(){
      let entity = {};
      entity.pageNum = this.seachVO.pageNum;
      entity.pageSize = this.seachVO.pageSize;
      console.log(entity)
      this.seachVO = entity;
    },
    //列表
    list(){
      listPayOrders(this.seachVO).then(res=>{
        console.log("res",res);
        this.tableData = res.msgData.records;
        this.seachVO.pageNum = res.msgData.current;
        this.seachVO.pageSize = res.msgData.size;
        this.total = res.msgData.total;
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.seachVO.pageSize = val;
      this.seachVO.pageNum = 1;
      this.list()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.seachVO.pageNum = val;
      this.list();
    }
  },
  created() {
    this.list();
  }
}
</script>

<style scoped>
.el-input{
  width: 200px;
}
</style>
